<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Rotational Motion</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Set common styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Start Drawing ---

        // Center the coordinate system to make drawing easier
        // The vertical center is shifted up slightly to accommodate the text below.
        ctx.translate(canvas.width / 2, 180);

        // 1. Draw the rod
        const rodLength = 300;
        const rodHeight = 12;
        ctx.strokeRect(-rodLength / 2, -rodHeight / 2, rodLength, rodHeight);
        
        // Draw the center line on the rod
        ctx.beginPath();
        ctx.moveTo(0, -rodHeight / 2);
        ctx.lineTo(0, rodHeight / 2);
        ctx.stroke();

        // 2. Draw the pivot point 'O'
        ctx.font = "24px 'Times New Roman'";
        ctx.fillText('O', 0, 30);

        // 3. Draw the left object and its velocity vector
        const leftX = -rodLength / 2;
        const leftCircleY = 70;
        const leftArrowTipY = 25;
        const circleRadius = 6;
        const arrowHeadSize = 12;

        // Left circle
        ctx.beginPath();
        ctx.arc(leftX, leftCircleY, circleRadius, 0, 2 * Math.PI);
        ctx.stroke();
        
        // Left arrow (pointing up)
        // Set fill for arrowhead
        ctx.fillStyle = '#333333';
        // Shaft
        ctx.beginPath();
        ctx.moveTo(leftX, leftCircleY - circleRadius);
        ctx.lineTo(leftX, leftArrowTipY + arrowHeadSize);
        ctx.stroke();
        // Head (filled triangle)
        ctx.beginPath();
        ctx.moveTo(leftX, leftArrowTipY); // Tip
        ctx.lineTo(leftX - arrowHeadSize / 2, leftArrowTipY + arrowHeadSize); // Bottom-left
        ctx.lineTo(leftX + arrowHeadSize / 2, leftArrowTipY + arrowHeadSize); // Bottom-right
        ctx.closePath();
        ctx.fill();

        // Left velocity label 'v'
        ctx.fillStyle = 'black';
        ctx.font = "italic 22px 'Times New Roman'";
        ctx.fillText('v', leftX - 25, (leftCircleY + leftArrowTipY) / 2);

        // 4. Draw the right object and its velocity vector
        const rightX = rodLength / 2;
        const rightCircleY = -70;
        const rightArrowTipY = -25;
        
        // Right circle
        ctx.beginPath();
        ctx.arc(rightX, rightCircleY, circleRadius, 0, 2 * Math.PI);
        ctx.stroke();

        // Right arrow (pointing down)
        // Set fill for arrowhead
        ctx.fillStyle = '#333333';
        // Shaft
        ctx.beginPath();
        ctx.moveTo(rightX, rightCircleY + circleRadius);
        ctx.lineTo(rightX, rightArrowTipY - arrowHeadSize);
        ctx.stroke();
        // Head (filled triangle)
        ctx.beginPath();
        ctx.moveTo(rightX, rightArrowTipY); // Tip
        ctx.lineTo(rightX - arrowHeadSize / 2, rightArrowTipY - arrowHeadSize); // Top-left
        ctx.lineTo(rightX + arrowHeadSize / 2, rightArrowTipY - arrowHeadSize); // Top-right
        ctx.closePath();
        ctx.fill();

        // Right velocity label 'v'
        ctx.fillStyle = 'black';
        ctx.font = "italic 22px 'Times New Roman'";
        ctx.fillText('v', rightX + 25, (rightCircleY + rightArrowTipY) / 2);

        // 5. Draw the descriptive text below the diagram
        // Using a font that supports Chinese characters well, like KaiTi or Sim Sun.
        // Fallback to a generic serif/sans-serif if not available.
        ctx.font = "24px 'KaiTi', 'SimSun', serif";
        ctx.fillText('(俯视图)', 0, 85);
        ctx.fillText('题 10 图', 0, 130);

    </script>
</body>
</html>